<template>
  <view class="product-carousel">
    <view
      v-for="(item, index) in list"
      :key="index"
      class="product-carousel-item"
      :style="{ animationDelay: `${index * 2 - 2}s` }"
    >
      <v-image
        height="44rpx"
        width="44rpx"
        border-radius="50%"
        :src="item.img"
        mode="aspectFill"
      />
      <view class="product-carousel-item-text">
        {{ item.str }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const name =
  '赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章云苏潘葛奚范彭郎鲁韦昌马苗凤花方俞任袁柳酆鲍史唐费廉岑薛雷贺倪汤滕殷罗毕郝邬安常乐于时傅皮卞齐康伍余元卜顾孟平黄';

const list = ref<{ img: string; str: string }[]>([]);
const getList = () => {
  const used: number[] = [];
  for (let i = 0; i < 10; i++) {
    let imgIndex = Math.floor(Math.random() * 50) + 1;
    while (used.includes(imgIndex)) {
      imgIndex = Math.floor(Math.random() * 50) + 1;
    }
    used.push(imgIndex);
    const img = `/static/avatars/${imgIndex}.jpg`;
    let str = '';
    str += name[Math.floor(Math.random() * name.length)];
    str += '**';
    str += ' 购买了商品 ';
    const hour = Math.floor(Math.random() * 6) + 1;
    str += `${hour}小时前`;
    list.value.push({ img, str });
  }
};
onMounted(getList);
</script>

<style lang="scss" scoped>
.product-carousel {
  position: absolute;
  z-index: 1;
  left: 24rpx;
  top: calc(40rpx + 92rpx);
  .product-carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    padding-right: 12rpx;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    gap: 12rpx;
    opacity: 0;
    animation: roll 20s linear infinite;
    .product-carousel-item-text {
      font-size: 24rpx;
      color: white;
      white-space: nowrap;
    }
  }
}

@keyframes roll {
  0% {
    transform: translate(0, 10%);
    opacity: 0;
  }
  9% {
    transform: translate(0, 10%);
    opacity: 0;
  }
  10% {
    transform: translate(0, 0);
    opacity: 1;
  }
  20% {
    transform: translate(0, -110%);
    opacity: 1;
  }
  30% {
    transform: translate(0, -220%);
    opacity: 1;
  }
  40% {
    transform: translate(0, -330%);
    opacity: 0;
  }
  100% {
    transform: translate(0, -400%);
    opacity: 0;
  }
}
</style>
